<template>
	<view class="containt">
		<map class="map-view"
			 id="mapSearch"
			 :latitude="latitude" 
			 :longitude="longtide"
			 :markers="allMarkerList"
			 :show-location="true"
			 @regionchange="regionChange"
			 >
			 <image class="center-img" src="/static/search_map_center_icon.png" mode=""></image>
		</map>
		<view class="recommond-list-view">
			<view style="padding: 4px 8px; background-color: white;">
				<u-search 
					shape="square" 
					:showAction="false" 
					placeholder="请输入要搜索的地址" 
					v-model="keyword"
					@focus="handleFocus"
					@blur="handleBlur"
					@change="handleChange()">
				</u-search>
			</view>
			<!-- <view class="shop-address" @click="moveToMarker1(shopData.coordinate[1], shopData.coordinate[0], shopData)">{{shopData.name}}</view> -->
<!-- 			<view v-show="!isSearch && keyword == ''" class="address-item"  v-for="(item,index) in rList" :key="index">
				<view class="title">{{item.grpname}}</view>
				<view class="justify-start">
					<view class="item" :class="{'selectclass':index.toString()+sIndex.toString()==selectindex1}"  v-for="(sItem, sIndex) in item.addresses" :key="sItem.name" @click="moveToMarker2(sItem.coord[1], sItem.coord[0], sItem,sIndex,index)">
						{{sItem.name}}
					</view>
				</view>
			</view> -->
			<view class="search-result-view">
				<view class="search-item" v-for="(item,index) in resultList" :key="index" @click="moveToMarker3(item.location.lat, item.location.lng, item)">
					<view class="item">{{item.title}}</view>
					<view class="sub-item">{{item.address}}</view>
				</view>
				<u-empty v-if="resultList.length == 0"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		storeNearest ,
	} from '@/api/commen.js'
	import amap from '@/sdk/amap/amap-wx.js'
	import qqmap from '@/sdk/amap/qqmap-wx-jssdk.js'
	export default {
		data() {
			return {
				showRecommend: true,
				rList: [],
				allMarkerList: [],
				mapObject: null,
				QQMapWX: null,
				keyword: '',
				latitude : 26.04769,
				longtide : 119.27345,
				isSearch: false,
				resultList: [],
				shopData: {},
				addre: 'start',
				selectAddress: {},
				shopDataList: []
				
			};
		},
		onLoad() {
			this.QQMapWX = new qqmap({
				key: '2X6BZ-X5KKW-XNLR2-YGFPQ-O3OC2-XTBNO'
			})
			this.mapObject = uni.createMapContext('mapSearch');
			// this.loadMarker();
			let _this = this;
			// setTimeout(function(){
			// 	console.log("获取位置")
			// 	_this.QQMapWX.reverseGeocoder({
			// 		location: {
			// 		  latitude: _this.latitude,
			// 		  longitude: _this.longtide
			// 		},
			// 		success: function(res) {//搜索成功后的回调
			// 			console.log("通过坐标获取位置信息", res)
			// 		},
			// 		fail: function(error) {
			// 		    console.error(error);
			// 		},
					
			// 	})
			// },1000)

			uni.getFuzzyLocation({
				success:function(res) {
					console.log(res);
				},
				fail:function(error) {
					console.log(error);
				}
				
			})
		},
		methods: {
			loadMarker() {
				var tempMarker = [];
				this.shopDataList.forEach(item => {
					tempMarker.push({
						id: item.id ,
						latitude: item.lat,
						longitude: item.lon,
						iconPath: '/static/map_marker_iocn.png',
						width: 40,
						height: 40,
						title: item.storeName,
						label: {
							content: item.storeName,
							color: '#000',
							bgColor: '#fff',
							borderRadius: 6,
							padding: 4,
							fontSize : 12,
							textAlign: 'center',
							anchorY: -61,
						},
					})
				})
				
				this.allMarkerList = tempMarker
				console.log(this.allMarkerList);
			},
			reverseGeocoder() {
				// this.QQMapWX.reverseGeocoder()
			},
			regionChange(e) {
				console.log(e);
				if (e.type == 'end') {
					var param = {
						lat : e.detail.centerLocation.latitude,
						lon : e.detail.centerLocation.longitude,
						count: 10
					}
					storeNearest(param).then(res => {
						console.log(res);
						if (res.code == 200) {
							this.shopDataList = res.data;
							this.loadMarker();
						}
					})
				}
			},
			// 选择门店
			moveToMarker1(lat , lng , item){
				var add = {
					name: item.name,
					address: item.address,
					coordinate: item.coordinate
				}
				this.selectAddress = add
				this.selectindex1 = 100;
				console.log(this.mapObject);
				this.mapObject.moveToLocation(
					{
						latitude: lat,longitude: lng,
					},
					{
						complete: res=>{
							console.log('移动完成:', res)
						}
					},
				)
			},
			// 选择推荐点
			moveToMarker2(lat , lng , item,index,index1){
				//index1最外层  index内层
				this.selectindex1 = index1.toString() + index.toString()
				console.log(2222222, typeof(index) , index1, this.selectindex1)
				var add = {
					name: item.name,
					address: item.name,
					coordinate: item.coord
				}
				this.selectAddress = add
				console.log(this.mapObject);
				this.mapObject.moveToLocation({latitude: lat,longitude: lng},{
						complete: res=>{
							console.log('移动完成:', res)
						}
					},
				)
			},
			// 选择搜索结果
			moveToMarker3(lat , lng , item){
				var add = {
					name: item.title,
					address: item.address,
					coordinate: [item.location.lng ,item.location.lat],
				}
				this.selectAddress = add
				console.log(this.mapObject);
				this.mapObject.moveToLocation({latitude: lat,longitude: lng},{
						complete: res=>{
							console.log('移动完成:', res)
						}
					},
				)
			},
			
			handleFocus(){
				this.isSearch = true
			},
			handleBlur(){
				if (this.keyword == '') {
					this.resultList = []
				}
				this.isSearch = false
			},
			handleChange(e){
				console.log(e);
				if (e == ''){
					return;
				}
				let _this = this;
				this.QQMapWX.getSuggestion({
				    //获取输入框值并设置keyword参数
				    keyword: e, //用户输入的关键词，可设置固定值,如keyword:'KFC'
				    success: function(res) {//搜索成功后的回调
						_this.resultList = res.data;
						console.log(_this.resultList);
				    },
				    fail: function(error) {
				        console.error(error);
				    },
				});
			},
			confirmBtnClick(){
				var pages = getCurrentPages()
				var prevPage = pages[pages.length - 2]
				// console.log(prevPage.$vm);
				// return;
				if (this.addre == 'start'){
					prevPage.$vm.startLocation = this.selectAddress;
					
				}else {
					prevPage.$vm.endLocation = this.selectAddress;
					
				}
				prevPage.$vm.getPriceData()
				uni.navigateBack({delta: 1})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: white;
	}
	.selectclass{
		border: solid 2px #2C84F7;
	}
	.containt{
		position: relative;
		.bottom-view{
			position: absolute;
			bottom: 16px;
			left: 16px;
			right: 16px;
			height: 260px;
			border-radius: 12px;
			background-color: white;
			box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, .1);
		}
		.recommond-list-view{
			position: absolute;
			top: calc(50vh);
			left: 0px;
			right: 0px;
			// padding: 10px 16px;
			height: calc(50vh);
			overflow-y: scroll; 
			
			.shop-title{
				margin: 8px 0px;
				font-weight: 500;
				font-size: 16px;
			}
			.shop-address{
				font-size: 500;
				color: $uni-color-primary;
				font-size: 18px;
				margin-bottom: 6px;
			}
			.address-item{
				padding: 10px 0px 4px;
				.title{
					font-weight: 500;
					font-size: 16px;
					margin-bottom: 8px;
				}
				.item{
					margin-right: 6px;
					font-size: 12px;
					padding: 8px 14px;
					background: #F1F2F7;
					border-radius: 4px;
					color: rgb(98, 98, 98);
					
				}
			}
			.search-result-view{
				height: calc(100% - 70px);
				width: 100%;
				overflow-y: scroll;
				min-height: 100px;
				background-color: #fff;
				padding: 0px 10px;
				box-sizing: border-box;
				.search-item{
					box-sizing: border-box;
					padding: 10px 0;
					border-bottom: 1rpx solid #F1F2F7;
					.item{
						font-weight: 500;
						font-size: 16px;
					}
					.sub-item{
						padding-top: 4px;
						font-size: 15px;
					}
				}
			}
		}
	}
	.map-view{
		height: calc(50vh);
		width: calc(100vw);
		.confirm-btn{
			position: absolute;
			right: 10px;
			bottom: 10px;
			color: #fff;
			padding: 8px 16px;
			background-color: $uni-color-primary;
			border-radius: 4px;
		}
		.center-img{
			position: absolute;
			left: calc(50% - 30rpx);
			top: calc(50% - 30rpx);
			width: 60rpx;
			height: 60rpx;
		}
	}
</style>
